.linear-progress {
  position: relative;
  overflow: hidden;
  height: 4px;
  background: rgba(theme-color("primary-darken-1"), 0.2);

  .linear-progress__bar {
    position: absolute;
    width: auto;
    top: 0;
    bottom: 0;
    background: theme-color("primary");

    &.anim-type-1 {
      animation: linear-progress-bar-animation 1.4s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    &.anim-type-2 {
      animation: linear-progress-bar-animation2 1.6s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    &.anim-type-3 {
      animation: linear-progress-bar-animation3 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }
  }
}

@keyframes linear-progress-bar-animation {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes linear-progress-bar-animation2 {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

@keyframes linear-progress-bar-animation3 {
  0% {
    left: 0%;
    right: 100%;
    opacity: 1;
  }
  25% {
    left: 0%;
    right: 70%;
  }
  40% {
    left: 0%;
    right: 65%;
  }
  50% {
    left: 0;
    right: 60%;
  }
  60% {
    left: 0%;
    right: 0%;
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.circular-progress {
  display: inline-block;

  .circular-progress__svg {
    animation: circular-progress-rotate-animation 1.2s linear infinite;
  }

  .circular-progress__circle {
    stroke: theme-color("primary");
    stroke-linecap: round;
    stroke-dasharray: 31px, 124px;
    stroke-dashoffset: 0px;
    fill: none;
    animation: cirgular-progress-circular-dash 1.4s ease-in-out infinite;
  }
}

@keyframes circular-progress-rotate-animation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cirgular-progress-circular-dash {
  0% {
    stroke-dasharray: 1px, 124px;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 100px, 124px;
    stroke-dashoffset: -15px;
  }
  100% {
    stroke-dasharray: 100px, 124px;
    stroke-dashoffset: -120px;
  }
}
